import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";

const VerticalHistogramChart = ({
  title = "数据展示",
  name = "",
  data = []
}) => {
  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };
  const getOption = data => {
    return {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      toolbox: {
        feature: {
            magicType: {
                type: ['line', 'bar']
            },
            saveAsImage: {
                show: true,
                name: title,
                pixelRatio: 2
            },
            dataView:{
                
            },
            restore:{}
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          axisLabel: {
            interval: 0
          },
          splitLine: { show: false },
          type: "category",
          data: data.map(item => item.name),
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: name,
          type: "bar",
          barWidth: "60%",
          stack: "key",
          label: {
            show: true,
            position: "top"
          },
          data: data.map(item => parseFloat(item.score))
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <ReactEcharts theme={theme} option={getOption(data)} />
    </ChartsWrap>
  );
};

export default VerticalHistogramChart;
